<style>
    .progress-bar-container {
        height: 13px;
        width: 140px;
        border: 1px solid #888;
        float: right;
        border-radius: 7px;
        margin-top: 0px;
        margin-right: 2px
    }

    .progress-bar {
        float: left;
        height: 13px;
        width: 50%;
        border-radius: 7px;
        background-color: rgba(0, 65, 245, 0.911);
        text-align: center;
        color: #fff;
        font-size: 10px;
    }
</style>

<style>
    table {
        width: 220px;
        text-align: right;
        max-height: 150px;
        overflow: hidden;
    }

    tr td:first-child {
        text-align: left;
    }
</style>
<table rules="none">
    <tbody>
        <tr>
            <td>麦克风</td>
            <td><span class="progress-bar-container">
                    <span class="progress-bar">
                    </span>
                </span></td>
        </tr>
        <tr>
            <td>外放</td>
            <td><span class="progress-bar-container">
                    <span class="progress-bar">
                    </span>
                </span></td>
        </tr>
        <tr>
            <td>耳机</td>
            <td><span class="progress-bar-container">
                    <span class="progress-bar">
                    </span>
                </span></td>
        </tr>
    </tbody>
</table>